<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>树组件 tree - Layui 文档</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script>;!function(){self!==parent&&(location.href="about:blank")}();</script>
  <link href="/public/layui/v/2.8.6/css/layui.css" rel="stylesheet">
  <link href="/public/static/dist/docs/2.8/css/global.css?v=16" rel="stylesheet">
  <script>
  (function(){if(window.JSON&&window.JSON.parse){var c=document.getElementsByTagName("head"),a=document.createElement("link");try{var b=JSON.parse(localStorage.layui)}catch(d){b={}}"dark"===b.themeMode&&(a.href="//res.sentcss.com/static/dist/docs/2.8/css/layui-theme-dark.css?v=16",a.rel="stylesheet",a.id="layuicss-theme-dark",c[0].appendChild(a))}})();
  </script>
</head>
<body>
<div class="layui-header ws-header ws-bg-light">
  <div class="layui-container">
    <div class="ws-logo">
      <a class="logo" href="../../../index.html">
        <img src="/public/static/images/layui/logo.png" alt="layui">
      </a>
    </div>
    <div class="ws-header-assist">
      <div class="layui-form layui-hide-xs ws-search" lay-filter="LAY-ws-header-component"></div>
      <div class="layui-hide-xs ws-notice"></div>
    </div>
    
    <div class="ws-header-menu">
      <ul class="layui-nav layui-bg-gray ws-bg-light" id="LAY_NAV_TOP">
        <li class="layui-nav-item" data-dir="docs">
          <a href="../index.html">组件</a> 
        </li>
        <li class="layui-nav-item" data-dir="notes">
          <a href="../../../notes/index.html">笔记</a> 
        </li>
        <li class="layui-nav-item layui-hide-xs">
          <a href="https://gitee.com/layui/layui/issues" target="_blank" rel="nofollow">社区</a>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">
            <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
            生态
          </a>
          <dl class="layui-nav-child layui-nav-child-r" style="margin-right: -21px;">  
            <dd class="layui-hide-sm layui-show-xs" lay-unselect>
              <a href="https://gitee.com/layui/layui/issues" target="_blank" rel="nofollow">社区</a>
              <hr>
            </dd>
            <dd lay-unselect>
              <a href="https://dev.layuion.com/extend/" target="_blank">Layui 第三方扩展组件</a>
            </dd>
            <dd lay-unselect>
              <a href="https://github.com/Sight-wcg/layui-theme-dark" target="_blank" lay-unselect>
                Layui 深色主题 <span>(社区贡献)</span>
              </a>
            </dd>
            <dd lay-unselect>
              <a href="https://gitee.com/layui/layui-vue/" target="_blank" lay-unselect>
                Layui of Vue <span>(他人实现)</span>
              </a>
            </dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">2.8.6</a>
          <dl class="layui-nav-child layui-nav-child-c">  
            <dd lay-unselect class="layui-this"><a href="../../../index.html">2.8.6</a></dd>
            <dd lay-unselect><a href="../../../2.7/index.html">2.7.6</a></dd>
          </dl>
        </li>
      </ul>
      <div class="ws-header-more">
        <i class="layui-icon layui-icon-shrink-right"></i>
      </div>
      <div class="ws-header-tool ws-bg-light">
        <div class="layui-form ws-header-theme" lay-filter="header-theme">
          <input type="checkbox" name="theme-mode" id="ID-header-theme-mode" lay-filter="header-theme-mode" lay-skin="switch">
          <div lay-checkbox>
            <i class="layui-icon layui-icon-moon"></i> | 
            <i class="layui-icon layui-icon-light"></i>
          </div>
        </div>
        <div>
          <a href="https://github.com/layui/layui" target="_blank" title="Github">
            <i class="layui-icon layui-icon-github layui-font-20"></i>
          </a>
        </div>
        <div>
          <a href="https://gitee.com/layui/layui" target="_blank" title="Gitee">
            <i class="layui-icon layui-icon-gitee layui-font-20" style="color: #C71D23;"></i>
            <!--<img src="https://gitee.com/static/images/logo-en.svg" width="21">-->
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- 让 IE8/9 兼容响应式栅格 -->
<!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
 
<div class="layui-container ws-container">
  
<div class="layui-panel ws-menu">
  <ul class="layui-menu layui-menu-lg ws-docs-menu">
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">基础</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../index.html">
              <span>开始使用</span> 
              <span class="layui-font-12 layui-font-gray">Getting Started</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../base.html">
              <span>底层方法</span>
              <span class="layui-font-12 layui-font-gray">Base Function</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../modules.html">
              <span>模块系统</span>
              <span class="layui-font-12 layui-font-gray">Modules</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../versions.html">
              <span>更新日志</span>
              <span class="layui-font-12 layui-font-gray">Versions</span>
              <span class="layui-badge-dot"></span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">布局</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../layout/index.html">
              <span>框体</span>
              <span class="layui-font-12 layui-font-gray">Layout</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../layout/grid.html">
              <span>栅格</span>
              <span class="layui-font-12 layui-font-gray">Grid</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">通用</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../color/index.html">
              <span>颜色</span>
              <span class="layui-font-12 layui-font-gray">Color</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../button/index.html">
              <span>按钮</span>
              <span class="layui-font-12 layui-font-gray">Button</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../icon/index.html">
              <span>图标</span>
              <span class="layui-font-12 layui-font-gray">Icon</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../anim/index.html">
              <span>动画</span>
              <span class="layui-font-12 layui-font-gray">Anim</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">表单</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/index.html">
              <span>表单组件</span>
              <span class="layui-font-12 layui-font-gray">Form</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/input.html">
              <span>输入框</span>
              <span class="layui-font-12 layui-font-gray">Input / Textarea</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/select.html">
              <span>选择框</span>
              <span class="layui-font-12 layui-font-gray">Select</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/checkbox.html">
              <span>复选框</span>
              <span class="layui-font-12 layui-font-gray">Checkbox</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/radio.html">
              <span>单选框</span>
              <span class="layui-font-12 layui-font-gray">Radio</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">展示</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../table/index.html">
              <span>表格</span>
              <span class="layui-font-12 layui-font-gray">Table</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../laypage/index.html">
              <span>分页</span>
              <span class="layui-font-12 layui-font-gray">Laypage</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../treeTable/index.html">
              <span>树形表格</span>
              <span class="layui-font-12 layui-font-gray">TreeTable</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../nav/index.html">
              <span>导航菜单</span>
              <span class="layui-font-12 layui-font-gray">Nav</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../menu/index.html">
              <span>基础菜单</span>
              <span class="layui-font-12 layui-font-gray">Menu</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../tab/index.html">
              <span>选项卡</span>
              <span class="layui-font-12 layui-font-gray">Tab</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../badge/index.html">
              <span>徽章</span>
              <span class="layui-font-12 layui-font-gray">Badge</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../auxiliar/index.html">
              <span>辅助</span>
              <span class="layui-font-12 layui-font-gray">Blockquote / Fieldset / hr</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../class/index.html">
              <span>公共类</span>
              <span class="layui-font-12 layui-font-gray">Class</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../panel/index.html">
              <span>面板</span>
              <span class="layui-font-12 layui-font-gray">Panel / Card / Collapse</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../progress/index.html">
              <span>进度条</span>
              <span class="layui-font-12 layui-font-gray">Progress</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../timeline/index.html">
              <span>时间线</span>
              <span class="layui-font-12 layui-font-gray">Timeline</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../fixbar/index.html">
              <span>固定条</span>
              <span class="layui-font-12 layui-font-gray">Fixbar</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="index.html">
              <span>树组件</span>
              <span class="layui-font-12 layui-font-gray">Tree</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../carousel/index.html">
              <span>轮播</span>
              <span class="layui-font-12 layui-font-gray">Carousel</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../flow/index.html">
              <span>流加载</span>
              <span class="layui-font-12 layui-font-gray">Flow</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../code/index.html">
              <span>代码预览组件</span>
              <span class="layui-font-12 layui-font-gray">Code</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">交互</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../layer/index.html">
              <span>弹出层</span>
              <span class="layui-font-12 layui-font-gray">Layer</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../laydate/index.html">
              <span>日期与时间选择</span>
              <span class="layui-font-12 layui-font-gray">Laydate</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../upload/index.html">
              <span>上传</span>
              <span class="layui-font-12 layui-font-gray">Upload</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../dropdown/index.html">
              <span>下拉菜单</span>
              <span class="layui-font-12 layui-font-gray">Dropdown</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../colorpicker/index.html">
              <span>颜色选择器</span>
              <span class="layui-font-12 layui-font-gray">Colorpicker</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../transfer/index.html">
              <span>穿梭框</span>
              <span class="layui-font-12 layui-font-gray">Transfer</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../slider/index.html">
              <span>滑块</span>
              <span class="layui-font-12 layui-font-gray">Slider</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../rate/index.html">
              <span>评分</span>
              <span class="layui-font-12 layui-font-gray">Rate</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">其他</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../laytpl/index.html">
              <span>模板引擎</span>
              <span class="layui-font-12 layui-font-gray">Laytpl</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../util/index.html">
              <span>工具模块</span>
              <span class="layui-font-12 layui-font-gray">Util</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    
  </ul>
</div>

  <div class="ws-content">
    <div class="layui-text ws-text" id="WS-text">
      <h1>树组件</h1>
<blockquote class="layui-elem-quote">
<p>树组件 <code>tree</code> 是以树形为结构的菜单伸缩型组件，<em class="layui-text-em">当前版本中，<code>tree</code>主要用于树菜单展示，交互性相对较弱。</em></p>
</blockquote class="layui-elem-quote">
<h2 id="examples" lay-toc="{anchor: null}" style="margin-bottom: 0;">示例</h2>
<div>
<h3 lay-toc="{id: 'examples', level: 2, hot: true}" class="layui-hide">综合演示</h3>
<pre class="layui-code" lay-options="{preview: true, text: {preview: '综合演示'}, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<div class="layui-btn-container">
  <button type="button" class="layui-btn layui-btn-sm" lay-on="getChecked">获取选中节点数据</button>
  <button type="button" class="layui-btn layui-btn-sm" lay-on="setChecked">勾选指定节点</button>
  <button type="button" class="layui-btn layui-btn-sm" lay-on="reload">重载实例</button>
</div>
 
<div id="ID-tree-demo"></div>
<!-- import layui -->
<script>
layui.use(function(){
  var tree = layui.tree;
  var layer = layui.layer;
  var util = layui.util;
 
  // 模拟数据
  var data = [{title:'一级1',id:1,field:'name1',checked:true,spread:true,children:[{title:'二级1-1 可允许跳转',id:3,field:'name11',href:'',children:[{title:'三级1-1-3',id:23,field:'',children:[{title:'四级1-1-3-1',id:24,field:'',children:[{title:'五级1-1-3-1-1',id:30,field:''},{title:'五级1-1-3-1-2',id:31,field:''}]}]},{title:'三级1-1-1',id:7,field:'',children:[{title:'四级1-1-1-1 可允许跳转',id:15,field:'',href:''}]},{title:'三级1-1-2',id:8,field:'',children:[{title:'四级1-1-2-1',id:32,field:''}]}]},{title:'二级1-2',id:4,spread:true,children:[{title:'三级1-2-1',id:9,field:'',disabled:true},{title:'三级1-2-2',id:10,field:''}]},{title:'二级1-3',id:20,field:'',children:[{title:'三级1-3-1',id:21,field:''},{title:'三级1-3-2',id:22,field:''}]}]},{title:'一级2',id:2,field:'',spread:true,children:[{title:'二级2-1',id:5,field:'',spread:true,children:[{title:'三级2-1-1',id:11,field:''},{title:'三级2-1-2',id:12,field:''}]},{title:'二级2-2',id:6,field:'',children:[{title:'三级2-2-1',id:13,field:''},{title:'三级2-2-2',id:14,field:'',disabled:true}]}]},{title:'一级3',id:16,field:'',children:[{title:'二级3-1',id:17,field:'',fixed:true,children:[{title:'三级3-1-1',id:18,field:''},{title:'三级3-1-2',id:19,field:''}]},{title:'二级3-2',id:27,field:'',children:[{title:'三级3-2-1',id:28,field:''},{title:'三级3-2-2',id:29,field:''}]}]}];
  // 渲染
  tree.render({
    elem: '#ID-tree-demo',
    data: data,
    showCheckbox: true,  // 是否显示复选框
    id: 'demo-id-1',
    isJump: true, // 是否允许点击节点时弹出新窗口跳转
    click: function(obj){
      var data = obj.data;  //获取当前点击的节点数据
      layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
    }
  });
  // 按钮事件
  util.event('lay-on', {
    getChecked: function(othis){
      var checkedData = tree.getChecked('demo-id-1'); // 获取选中节点的数据
      
      layer.alert(JSON.stringify(checkedData), {shade:0});
      console.log(checkedData);
    },
    setChecked: function(){
      tree.setChecked('demo-id-1', [12, 16]); // 勾选对应 id 值的节点
    },
    reload: function(){
      tree.reload('demo-id-1', {}); // 重载实例
    }
  });
  
});
</script>
  </textarea>
</pre>
<h3 id="demo-showLine" lay-toc="{level: 2}" class="ws-anchor ws-bold">无连接线风格</h3>
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<div id="ID-tree-demo-showLine"></div>
<!-- import layui -->
<script>
layui.use(function(){
  var tree = layui.tree;
  // 模拟数据
  var data = [{title:'江西',id:1,children:[{title:'南昌',id:1000,children:[{title:'青山湖区',id:10001},{title:'高新区',id:10002}]},{title:'九江',id:1001},{title:'赣州',id:1002}]},{title:'广西',id:2,children:[{title:'南宁',id:2000},{title:'桂林',id:2001}]},{title:'陕西',id:3,children:[{title:'西安',id:3000},{title:'延安',id:3001}]},{title:'山西',id:3,children:[{title:'太原',id:4000},{title:'长治',id:4001}]}];
  // 渲染
  tree.render({
    elem: '#ID-tree-demo-showLine',
    data: data,
    showLine: false  // 是否开启连接线
  });
});
</script>
  </textarea>
</pre>
<h3 id="demo-icon-stretch" lay-toc="{level: 2}" class="ws-anchor ws-bold">仅图标控制伸缩</h3>
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<div id="ID-tree-demo-onlyIconControl"></div>
<!-- import layui -->
<script>
layui.use(function(){
  var tree = layui.tree;
  var layer = layui.layer;
  // 模拟数据
  var data = [{title:'江西',id:1,children:[{title:'南昌',id:1000,children:[{title:'青山湖区',id:10001},{title:'高新区',id:10002}]},{title:'九江',id:1001},{title:'赣州',id:1002}]},{title:'广西',id:2,children:[{title:'南宁',id:2000},{title:'桂林',id:2001}]},{title:'陕西',id:3,children:[{title:'西安',id:3000},{title:'延安',id:3001}]},{title:'山西',id:3,children:[{title:'太原',id:4000},{title:'长治',id:4001}]}];
  // 渲染
  tree.render({
    elem: '#ID-tree-demo-onlyIconControl',
    data: data,
    onlyIconControl: true,  // 是否仅允许节点左侧图标控制展开收缩
    click: function(obj){
      layer.msg(JSON.stringify(obj.data));
    }
  });
  
});
</script>
  </textarea>
</pre>
<h3 id="demo-accordion" lay-toc="{level: 2}" class="ws-anchor ws-bold">手风琴模式</h3>
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<div id="ID-tree-demo-accordion"></div>
<!-- import layui -->
<script>
layui.use(function(){
  var tree = layui.tree;
  // 渲染
  tree.render({
    elem: '#ID-tree-demo-accordion',
    data: [{
      title: '优秀',
      children: [{
        title: '80 ~ 90'
      },{
        title: '90 ~ 100'
      }]
    },{
      title: '良好',
      children: [{
        title: '70 ~ 80'
      },{
        title: '60 ~ 70'
      }]
    },{
      title: '一般',
      children: [{
        title: '0 ~ 60'
      }]
    }],
    accordion: true 
  });
});
</script>
  </textarea>
</pre>
<h3 id="demo-checkbox" lay-toc="{level: 2}" class="ws-anchor ws-bold">开启复选框</h3>
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<div id="ID-tree-demo-showCheckbox"></div>
<!-- import layui -->
<script>
layui.use(function(){
  var tree = layui.tree;
 
  // 模拟数据
  var data = [{title:'早餐',id:1,children:[{title:'拌粉',id:5},{title:'蒸饺',id:6},{title:'豆浆',id:7}]},{title:'午餐',id:2,checked:true,children:[{title:'藜蒿炒腊肉',id:8},{title:'西湖醋鱼',id:9},{title:'小白菜',id:10},{title:'海带排骨汤',id:11}]},{title:'晚餐',id:3,children:[{title:'红烧肉',id:12,fixed:true},{title:'番茄炒蛋',id:13}]},{title:'夜宵',id:4,children:[{title:'小龙虾',id:14,checked:true},{title:'香辣蟹',id:15,disabled:true},{title:'烤鱿鱼',id:16}]}];
  // 渲染
  tree.render({
    elem: '#ID-tree-demo-showCheckbox',
    data: data,
    showCheckbox: true,
    edit: ['add', 'update', 'del'] // 开启节点的右侧操作图标
  });
});
</script>
  </textarea>
</pre>
</div>
<h2 id="api" lay-toc="{hot: true}">API</h2>
<table class="layui-table">
<thead>
<tr>
<th>API</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>var tree = layui.tree</td>
<td>获得 <code>tree</code> 模块。</td>
</tr>
<tr>
<td><a href="index.html#render">tree.render(options)</a></td>
<td>tree 组件渲染，核心方法。</td>
</tr>
<tr>
<td><a href="index.html#getChecked">tree.getChecked(id)</a></td>
<td>获取选中的节点数据</td>
</tr>
<tr>
<td><a href="index.html#setChecked">tree.setChecked(id, idArr)</a></td>
<td>设置对应 id 的节点选中</td>
</tr>
<tr>
<td><a href="index.html#reload">tree.reload(id, options)</a></td>
<td>tree 实例重载</td>
</tr>
</tbody>
</table class="layui-table">
<h3 id="render" lay-toc="{level: 2}">渲染</h3>
<p><code>tree.render(options);</code></p>
<ul>
<li>参数 <code>options</code> : 基础属性配置项。<a href="index.html#options">#详见属性</a></li>
</ul>
<h3 id="options" lay-toc="{level: 2, hot: true}">属性</h3>
<div>
<table class="layui-table">
  <colgroup>
    <col width="150">
    <col>
    <col width="100">
    <col width="100">
  </colgroup>
  <thead>
    <tr>
      <th>属性名</th>
      <th>描述</th>
      <th>类型</th>
      <th>默认值</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
<td>elem</td>
<td>
<p>绑定元素选择器</p>
</td>
<td>string/DOM</td>
<td>-</td>
    </tr>
    <tr>
<td>data</td>
<td>
<p><code>tree</code> 的数据源。其格式详见：<a href="index.html#options.data">#data 格式</a></p>
</td>
<td>array</td>
<td>-</td>
    </tr>
    <tr>
<td>id</td>
<td>
<p>设置实例唯一索引，用于其他方法传参使用。</p>
</td>
<td>string</td>
<td>-</td>
    </tr>
    <tr>
<td>showCheckbox</td>
<td>
<p>是否显示复选框</p>
</td>
<td>boolean</td>
<td>
<p><code>false</code></p>
</td>
    </tr>
    <tr>
<td>edit</td>
<td>
<p>是否开启节点的右侧操作图标。支持以下可选值：</p>
<ul>
<li>若为 <code>true</code>，则默认显示「改删」图标</li>
<li>若为 数组，则可自由配置操作图标，如：<code>edit:['add', 'update', 'del']</code> ，且图标将按照数组的顺序显示。</li>
</ul>
</td>
<td>boolean<br>array</td>
<td>
<p><code>false</code></p>
</td>
    </tr>
    <tr>
<td>accordion</td>
<td>
<p>是否开启手风琴模式</p>
</td>
<td>boolean</td>
<td>
<p><code>false</code></p>
</td>
    </tr>
    <tr>
<td>onlyIconControl</td>
<td>
<p>是否仅允许节点左侧图标控制展开伸缩。</p>
<ul>
<li>默认为 <code>false</code>，即点击节点本身也可控制伸缩</li>
<li>若值为 <code>true</code>，则只能通过节点左侧图标来展开收缩</li>
</ul>
</td>
<td>boolean</td>
<td>
<p><code>false</code></p>
</td>
    </tr>
    <tr>
<td>isJump</td>
<td>
<p>是否允许点击节点时弹出新窗口跳转。若为 <code>true</code>，则需在对应的 data 中设定 href 属性（url 格式）</p>
</td>
<td>boolean</td>
<td>
<p><code>false</code></p>
</td>
    </tr>
    <tr>
<td>showLine</td>
<td>
<p>是否开启节点连接线。若设为 <code>false</code>，则节点左侧出现三角图标。</p>
</td>
<td>boolean</td>
<td>
<p><code>true</code></p>
</td>
    </tr>
    <tr>
<td>text</td>
<td colspan="3">
<p>自定义默认文本，<code>object</code> 类型。支持以下属性：</p>
<pre><code class="layui-code">text: {
  defaultNodeName: '未命名', // 节点默认名称
  none: '无数据' // 数据为空时的提示文本
}  
</code></pre>
</td>
    </tr>
    <tr>
<td colspan="4" style="text-align: center"> 
<div id="options.callback" lay-pid="options" class="ws-anchor">
<p><a href="index.html#options.callback">回调函数</a></p>
</div>
</td>
    </tr>
    <tr>
<td>click</td>
<td colspan="3">
<div id="options.click" lay-pid="options" class="ws-anchor">
  节点被点击的回调函数。返回的参数如下：
</div>
<pre><code class="layui-code">click: function(obj){
  console.log(obj.data); // 得到当前点击的节点数据
  console.log(obj.state); // 得到当前节点的展开状态：open、close、normal
  console.log(obj.elem); // 得到当前节点元素
  
  console.log(obj.data.children); // 当前节点下是否有子节点
}
</code></pre>
</td>
    </tr>
    <tr>
<td>oncheck</td>
<td colspan="3">
<div id="options.oncheck" lay-pid="options" class="ws-anchor">  
  点击复选框时的回调函数，返回的参数如下：
</div>
<pre><code class="layui-code">oncheck: function(obj){
  console.log(obj.data); // 得到当前点击的节点数据
  console.log(obj.checked); // 节点是否被选中
  console.log(obj.elem); // 得到当前节点元素
}
</code></pre>
</td>
    </tr>
    <tr>
<td>operate</td>
<td colspan="3">
<div id="options.operate" lay-pid="options" class="ws-anchor">  
  点击节点的右侧操作图标的回调函数，返回的参数如下：
</div>
<pre><code class="layui-code">operate: function(obj){
  var type = obj.type; // 得到操作类型：add、edit、del
  var data = obj.data; // 得到当前节点的数据
  var elem = obj.elem; // 得到当前节点元素
  
  // Ajax 操作
  var id = data.id; // 得到节点索引
  if(type === 'add'){ // 增加节点
    //返回 key 值
    return 123;
  } else if(type === 'update'){ // 修改节点
    console.log(elem.find('.layui-tree-txt').html()); // 得到修改后的内容
  } else if(type === 'del'){ // 删除节点
    // …
  };
}
</code></pre>
</td>
    </tr>
  </tbody>
</table>
</div>
<h3 id="options.data" lay-toc="{level: 3, hot: true}">data 格式</h3>
<div>
<table class="layui-table">
  <colgroup>
    <col width="150">
    <col>
    <col width="100">
    <col width="100">
  </colgroup>
  <thead>
    <tr>
      <th>属性名</th>
      <th>描述</th>
      <th>类型</th>
      <th>默认值</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
<td>title</td>
<td>
<p>节点标题</p>
</td>
<td>string</td>
<td>-</td>
    </tr>
    <tr>
<td>id</td>
<td>
<p>节点唯一索引值，用于对指定节点进行各类操作</p>
</td>
<td>string</td>
<td>-</td>
    </tr>
    <tr>
<td>field</td>
<td>
<p>节点字段名</p>
</td>
<td>string</td>
<td>-</td>
    </tr>
    <tr>
<td>children</td>
<td>
<p>子节点。支持设定属性选项同父节点</p>
</td>
<td>array</td>
<td>-</td>
    </tr>
    <tr>
<td>href</td>
<td>
<p>点击节点弹出新窗口对应的 url。需开启 isJump 基础属性才有效。</p>
</td>
<td>string</td>
<td>-</td>
    </tr>
    <tr>
<td>spread</td>
<td>
<p>节点是否初始展开</p>
</td>
<td>boolean</td>
<td>
<p><code>false</code></p>
</td>
    </tr>
    <tr>
<td>checked</td>
<td>
<p>节点是否初始为选中状态。需开启 <code>showCheckbox</code> 基础属性时有效。</p>
</td>
<td>boolean</td>
<td>
<p><code>false</code></p>
</td>
    </tr>
    <tr>
<td>disabled</td>
<td>
<p>节点是否为禁用状态</p>
</td>
<td>boolean</td>
<td>
<p><code>false</code></p>
</td>
    </tr>
  </tbody>
</table>
</div>
<h3 id="getChecked" lay-pid="api" class="ws-anchor">获取选中的节点数据</h3>
<p><code>tree.getChecked(id);</code></p>
<ul>
<li>参数 <code>id</code> : 对应 tree 渲染时定义的 id 属性值</li>
</ul>
<pre><code class="layui-code">var tree = layui.tree;
// 渲染
tree.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性 …
});
// 获取选中的节点数据
var checkData = tree.getChecked('test');
</code></pre>
<h3 id="setChecked" lay-pid="api" class="ws-anchor">设置对应 id 的节点选中</h3>
<p><code>tree.setChecked(id, idArr);</code></p>
<ul>
<li>参数 <code>id</code> : 对应 tree 渲染时定义的 id 属性值</li>
<li>参数 <code>idArr</code> : 对应 tree 渲染时的 data 中的 id 属性值。数组格式，可设置多个。</li>
</ul>
<pre><code class="layui-code">var tree = layui.tree;
// 渲染
tree.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性 …
});
// 设置对应 id 的节点选中
tree.setChecked('test', [1, 3]); // 批量勾选 id 为 1,3 的节点
</code></pre>
<h3 id="reload" lay-toc="{level: 2}">重载</h3>
<p><code>tree.reload(id, idArr);</code></p>
<ul>
<li>参数 <code>id</code> : 对应 tree 渲染时定义的 id 属性值</li>
<li>参数 <code>options</code> : 基础属性配置项。<a href="index.html#options">#详见属性</a></li>
</ul>
<pre><code class="layui-code">var tree = layui.tree;
// 渲染
tree.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性 …
});
// 重载
tree.reload('test', { // options
  data: []
});
</code></pre>

    </div>
    <div class="ws-text-tools">
      
      <a href="https://github.com/layui/layui/edit/2.x/docs/tree/index.md" rel="nofollow" target="_blank" title="在 Github 上编辑此文档">
        <i class="layui-icon layui-icon-edit"></i>
      </a>
      
    </div>
  </div>
</div>
<div class="ws-menu-bar layui-bg-green layui-hide">
  <i class="layui-icon layui-icon-spread-left"></i>
</div>
  
<div class="layui-footer ws-footer">
  <p>
    Copyright &copy; 2023 <a href="../../../index.html">Layui</a> MIT Licensed</p>
  <p id="LAY-footer-info">
    <a href="https://gitee.com/layui/layui/blob/main/DISCLAIMER.md" rel="nofollow" target="_blank">免责声明</a> 
    <a href="https://github.com/layui/layui/blob/main/LICENSE" rel="nofollow" target="_blank">开源协议</a>
    <a href="https://gitee.com/layui/" target="_blank">开源生态</a>
    <a href="https://codepen.io/layui/pen/bGxZXrd" rel="nofollow" target="_blank">在线测试</a>
    <a href="https://gitee.com/layui/layui/issues" rel="nofollow" target="_blank">社区交流</a>
  </p>
  <p>
    <span>
      鸣谢：
      <a href="https://www.upyun.com/?invite=SJ0wu6g2-&referer=layui" target="_blank" sponsor="upyun" style="color: #23A7E8;">
        <strong>又拍云</strong>
      </a>
      <a href="https://gitee.com/?referer=layui" target="_blank" sponsor="Gitee" style="color:#C71D23;">
        <strong>Gitee</strong>
      </a>
      <a href="https://www.iconfont.cn/?referer=layui" target="_blank" sponsor="Gitee" style="color: #9B16FF;">
        <strong>iconfont</strong>
      </a>
    </span>
  </p>
</div>
<div class="ws-shade"></div>
 
<script src="/public/layui/v/2.8.6/layui.js"></script>
<script>
layui.config({
  base: '//res.sentcss.com/static/dist/docs/2.8/modules/',
  version: '16',
  res: '//res.sentcss.com/static/dist/docs/',
  curl: ''
}).use('global',function(w){w.a||w.r&&w.r()});
</script>
 
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?363b2abe8678eec8a6850500ea63a63b";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

</body>
</html>